<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>mall-c-test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
	href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script
	src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script
	src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5.3.2-85/tinymce.min.js"></script>

<style type="text/css">
.center {
	margin: 0 auto;
	width: 70%;
}
</style>
</head>
<body>
	<div id="app" class="container">
		<h2 class="center">发表博客</h2>
		<hr style="width: 70%;" />
		<form class="center">
			<div class="form-group">
				<label for="email">发布博客：</label> <input v-model="db.article.title"
					type="text" class="form-control" id="email" placeholder="标题">
			</div>
			<div class="form-group">
				<label for="sel1">文章分类:</label> <select v-model="db.article.type"
					class="form-control" id="sel1">
					<option value="原创">原创</option>
					<option value="转载">转载</option>
					<option value="新闻">新闻</option>
					<option value="其他">其他</option>
				</select>
			</div>
			<div class="form-group">
				<label for="email">内容：</label>
				<textarea id="mytextarea" class="form-control" rows="40"
					placeholder="内容"></textarea>
			</div>

			<button @click="addArticle()" type="button" class="btn btn-primary">发布</button>
		</form>
	</div>
</body>

<script type="text/javascript">
	tinymce.init({
		selector : '#mytextarea',
		language_url : '/js/zh_CN.js',
		language : "zh_CN",
		statusbar : false //隐藏右下角标记
	});
</script>

<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.1/axios.min.js"></script>
<script>
		new Vue({
			el: "#app",
			data: function() {
				return {
					db:{
					  "article": {
					    	"counts": 0,
					   	 	"title": "文章标题",
					   	 	"simpleContent" : '',
					   	 	"type": "其他",
					    	"userId": "zhangsike"
					  },
					  "content": {
						  
					    	"content": "文章内容"
					  }
					}
			}
			},
			methods: {
				addArticle() {
					this.db.content.content = this.getTxtWithHtml()
					var simpleTxt = this.getTxtOnly();
					if(simpleTxt.length <2){
						alert('请添加内容')
						return;
					}
					if(simpleTxt && simpleTxt.length >100){
						simpleTxt = simpleTxt.substr(0,100)+"...";
					}else{
						simpleTxt = simpleTxt+'...'
					}
					this.db.article.simpleContent = simpleTxt
					
					axios.post("/api/article", this.db).then(reponse => {
						alert("发布成功")
					}).catch(error => {
						alert("操作失败" + error)
					})
				},
				getTxtOnly(){
					var activeEditor = tinymce.activeEditor;
					var editBody = activeEditor.getBody();
					activeEditor.selection.select(editBody);
					var text = activeEditor.selection.getContent( { 'format' : 'text' } );
					return text;
				},
				getTxtWithHtml(){
					return tinyMCE.activeEditor.getContent();
				}
					
			}
		})
		

	</script>

</html>